<template>
  <div>
    <h3>
<!--      当前最新的count值为：{{$store.state.count}}-->
      {{$store.getters.showNum}}
    </h3>
    <button @click="btnHandle">+1</button>
    <button @click="btnHandleN">+N</button>
    <button @click="btnHandleAsync">+1 Async</button>
    <button @click="btnHandleNAsync">+N Async</button>
  </div>
</template>

<script>
export default {
    data(){
      return{

      }
    },
  methods: {
    btnHandle(){
       this.$store.commit('add')
    },
    btnHandleN(){
      this.$store.commit('addN',2)
    },
    // 异步更新count的值
    btnHandleAsync(){
      // dispatch触发action
      this.$store.dispatch('addAsync')
    },
    btnHandleNAsync(){
      this.$store.dispatch('addNAsync',5)
    }
  }
}
</script>

<style scoped>

</style>